Passing data between screens is a common requirement in Flutter applications. When a user selects an item, opens a profile, edits a product, selects a setting, or completes a form, one screen often needs to send information to another screen or receive a result back.
Flutter screens are widgets, and data can be passed to another screen through constructor parameters, route arguments, named-route arguments, or other application-state patterns. Flutter's official cookbook demonstrates passing objects directly through a screen constructor and also passing objects through RouteSettings or named-route arguments. :contentReference[oaicite:0]{index=0}
Applications frequently need to transfer information during navigation.
Suppose we have two screens:
Screen A
|
| Send Data
↓
Screen BFor example:
Product List
|
| Product object
↓
Product DetailsThe Product List screen sends the selected product to the Product Details screen.
| Method | Use Case |
|---|---|
| Constructor parameters | Simple and type-safe direct navigation |
RouteSettings | Passing an object through a route |
| Named route arguments | Passing data with Navigator.pushNamed() |
onGenerateRoute | Centralized route and argument handling |
Navigator.pop() result | Returning data to the previous screen |
| Shared application state | Data needed by multiple unrelated screens |
| Routing packages | Complex navigation and deep-linking scenarios |
The simplest approach is to pass data directly through the destination widget's constructor.
class ProfileScreen extends StatelessWidget {
final String name;
const ProfileScreen({
super.key,
required this.name,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Profile'),
),
body: Center(
child: Text(
'Welcome, $name',
style: const TextStyle(fontSize: 24),
),
),
);
}
}Navigate to the screen:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProfileScreen(
name: 'Rahul',
),
),
);Here, the value Rahul is passed from the first screen to ProfileScreen.
You can pass multiple values through constructor parameters.
class ProfileScreen extends StatelessWidget {
final String name;
final int age;
final String email;
const ProfileScreen({
super.key,
required this.name,
required this.age,
required this.email,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(name),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Name: $name'),
Text('Age: $age'),
Text('Email: $email'),
],
),
),
);
}
}Navigate:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProfileScreen(
name: 'Rahul',
age: 25,
email: '[email protected]',
),
),
);When multiple values belong to the same entity, creating a model class is usually cleaner than passing many individual parameters.
class User {
final int id;
final String name;
final String email;
const User({
required this.id,
required this.name,
required this.email,
});
}Create a user:
const user = User(
id: 101,
name: 'Rahul',
email: '[email protected]',
);Pass it to another screen:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfileScreen(
user: user,
),
),
);Destination screen:
class ProfileScreen extends StatelessWidget {
final User user;
const ProfileScreen({
super.key,
required this.user,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(user.name),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('ID: ${user.id}'),
Text('Name: ${user.name}'),
Text('Email: ${user.email}'),
],
),
),
);
}
}This pattern is particularly useful when the destination screen needs a complete object.
Flutter's official navigation cookbook demonstrates a similar pattern using a Todo model: the selected object is passed to a details screen through its constructor. :contentReference[oaicite:1]{index=1}
import 'package:flutter/material.dart';
class Product {
final int id;
final String name;
final double price;
const Product({
required this.id,
required this.name,
required this.price,
});
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final products = [
const Product(
id: 1,
name: 'Laptop',
price: 65000,
),
const Product(
id: 2,
name: 'Smartphone',
price: 35000,
),
const Product(
id: 3,
name: 'Headphones',
price: 5000,
),
];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ProductListScreen(products: products),
);
}
}
class ProductListScreen extends StatelessWidget {
final List products;
const ProductListScreen({
super.key,
required this.products,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Products'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ListTile(
title: Text(product.name),
subtitle: Text('₹${product.price}'),
trailing: const Icon(Icons.arrow_forward),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
product: product,
),
),
);
},
);
},
),
);
}
}
class ProductDetailsScreen extends StatelessWidget {
final Product product;
const ProductDetailsScreen({
super.key,
required this.product,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(product.name),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.name,
style: const TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
Text(
'Product ID: ${product.id}',
),
const SizedBox(height: 8),
Text(
'Price: ₹${product.price}',
style: const TextStyle(fontSize: 20),
),
],
),
),
);
}
} Another approach is to attach data to a route using RouteSettings(arguments: ...).
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProductDetailsScreen(),
settings: RouteSettings(
arguments: product,
),
),
);The destination screen can retrieve the object:
final product =
ModalRoute.of(context)!.settings.arguments as Product;Flutter's official documentation demonstrates this approach for passing an object to a new screen. :contentReference[oaicite:2]{index=2}
class ProductDetailsScreen extends StatelessWidget {
const ProductDetailsScreen({super.key});
@override
Widget build(BuildContext context) {
final product =
ModalRoute.of(context)!.settings.arguments as Product;
return Scaffold(
appBar: AppBar(
title: Text(product.name),
),
body: Center(
child: Text(
'Price: ₹${product.price}',
style: const TextStyle(fontSize: 24),
),
),
);
}
}Navigation:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProductDetailsScreen(),
settings: RouteSettings(
arguments: product,
),
),
);When using named routes, data can be passed through the arguments parameter of Navigator.pushNamed().
Navigator.pushNamed(
context,
'/profile',
arguments: user,
);The destination can retrieve the argument:
final user =
ModalRoute.of(context)!.settings.arguments as User;Flutter's official named-route recipe documents this approach. It also notes that named routes are no longer recommended for most new applications, so this technique is particularly useful when working with existing named-route applications or learning the API. :contentReference[oaicite:3]{index=3}
import 'package:flutter/material.dart';
class User {
final String name;
final String email;
const User({
required this.name,
required this.email,
});
}
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
routes: {
'/': (context) => const HomeScreen(),
'/profile': (context) => const ProfileScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
const user = User(
name: 'Rahul',
email: '[email protected]',
);
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
'/profile',
arguments: user,
);
},
child: const Text('Open Profile'),
),
),
);
}
}
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
@override
Widget build(BuildContext context) {
final user =
ModalRoute.of(context)!.settings.arguments as User;
return Scaffold(
appBar: AppBar(
title: const Text('Profile'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Name: ${user.name}'),
Text('Email: ${user.email}'),
],
),
),
);
}
}You can pass multiple values using a custom class.
class ScreenArguments {
final String title;
final String message;
const ScreenArguments({
required this.title,
required this.message,
});
}Pass the arguments:
Navigator.pushNamed(
context,
'/details',
arguments: const ScreenArguments(
title: 'Flutter',
message: 'Welcome to Flutter development!',
),
);Read them:
final args =
ModalRoute.of(context)!.settings.arguments as ScreenArguments;
Text(args.title);
Text(args.message);onGenerateRoute allows route arguments to be processed centrally.
MaterialApp(
onGenerateRoute: (settings) {
if (settings.name == '/profile') {
final user = settings.arguments as User;
return MaterialPageRoute(
builder: (context) {
return ProfileScreen(user: user);
},
);
}
return MaterialPageRoute(
builder: (context) => const HomeScreen(),
);
},
);Navigate:
Navigator.pushNamed(
context,
'/profile',
arguments: user,
);This approach keeps route-specific argument handling in one central location.
Data does not always move only from the first screen to the second screen. Sometimes the second screen needs to send a result back to the first screen.
Screen A
|
| Open Screen B
↓
Screen B
|
| Return Result
↓
Screen AFlutter's official cookbook uses Navigator.pop(context, result) to return a result from a screen. The original screen can await the Future returned by Navigator.push(). :contentReference[oaicite:4]{index=4}
Open the second screen:
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SelectionScreen(),
),
); Return data from the second screen:
Navigator.pop(
context,
'Selected Item',
);The returned value is received by the first screen through the result variable.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
),
);
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
String selectedValue = 'Nothing selected';
Future openSelectionScreen() async {
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SelectionScreen(),
),
);
if (!mounted) return;
if (result != null) {
setState(() {
selectedValue = result;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Return Data Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
selectedValue,
style: const TextStyle(fontSize: 20),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: openSelectionScreen,
child: const Text('Choose Option'),
),
],
),
),
);
}
}
class SelectionScreen extends StatelessWidget {
const SelectionScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Select Option'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(
context,
'Option A',
);
},
child: const Text('Option A'),
),
ElevatedButton(
onPressed: () {
Navigator.pop(
context,
'Option B',
);
},
child: const Text('Option B'),
),
],
),
);
}
} When Navigator.push() opens another screen, it returns a Future. That Future completes when the pushed route is popped.
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SelectionScreen(),
),
); Here:
String represents the type of result expected.await waits for the destination screen to close.result.The returned value does not have to be a String.
final selectedId = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ProductSelectionScreen(),
),
); Return an integer:
Navigator.pop(
context,
101,
);Boolean results are useful for confirmation screens.
final confirmed = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ConfirmationScreen(),
),
); Return the result:
Navigator.pop(context, true);Then:
if (confirmed == true) {
print('User confirmed');
}You can also return a complete object.
class Address {
final String city;
final String pincode;
const Address({
required this.city,
required this.pincode,
});
}Receive the object:
final address = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AddressScreen(),
),
);Return it:
Navigator.pop(
context,
const Address(
city: 'Mumbai',
pincode: '400001',
),
);A common practical example is sending form data to a confirmation screen.
class RegistrationData {
final String name;
final String email;
const RegistrationData({
required this.name,
required this.email,
});
}Navigate to confirmation:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConfirmationScreen(
data: RegistrationData(
name: nameController.text,
email: emailController.text,
),
),
),
);The confirmation screen receives the object through its constructor.
Suppose a product list contains:
Product(
id: 101,
name: 'Laptop',
price: 65000,
)When the user taps the product:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
product: product,
),
),
);The details screen displays:
Product Details
----------------------
Name: Laptop
ID: 101
Price: ₹65000
----------------------
[ Add to Cart ]When the user adds the item to the cart, the details screen can return a result:
Navigator.pop(
context,
product,
);The previous screen can receive the selected product:
final addedProduct = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
product: product,
),
),
); Another common use case is editing an existing object.
class Profile {
final String name;
final String email;
const Profile({
required this.name,
required this.email,
});
}Open the edit screen:
final updatedProfile = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EditProfileScreen(
profile: profile,
),
),
); After editing:
Navigator.pop(
context,
updatedProfile,
);The original screen can then update its UI with the returned profile.
Passing the selected item from a list to a detail screen is one of the most common Flutter navigation patterns.
ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ListTile(
title: Text(product.name),
subtitle: Text('₹${product.price}'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
product: product,
),
),
);
},
);
},
)The official Flutter cookbook uses the same general pattern with a list of objects and a details screen. :contentReference[oaicite:5]{index=5}
You do not always need to send the entire object. Sometimes sending an ID is more appropriate.
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
productId: 101,
),
),
);The destination can then use the ID to obtain the latest product information from a repository or API.
class ProductDetailsScreen extends StatelessWidget {
final int productId;
const ProductDetailsScreen({
super.key,
required this.productId,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
'Product ID: $productId',
),
),
);
}
}For applications using go_router, data can be represented through path parameters, query parameters, or extra data depending on the routing requirement.
GoRoute(
path: '/product/:id',
builder: (context, state) {
final id = state.pathParameters['id']!;
return ProductDetailsScreen(
productId: id,
);
},
)Navigate to:
context.go('/product/101');The destination receives 101 as the product ID.
For richer in-memory objects, go_router also supports the extra field.
context.push(
'/product-details',
extra: product,
);Read the object:
GoRoute(
path: '/product-details',
builder: (context, state) {
final product = state.extra as Product;
return ProductDetailsScreen(
product: product,
);
},
)When choosing between a URL parameter and an object passed in memory, consider whether the destination should be directly addressable through a URL. URL-based identifiers are particularly useful for deep links.
There is an important difference between passing an object directly and passing information through a URL.
| Method | Example | Suitable For |
|---|---|---|
| Object through constructor | Product(product: product) | Direct in-app navigation |
| Route argument | arguments: product | Named-route applications |
| Path parameter | /product/101 | Deep links and URLs |
| Query parameter | ?category=laptop | Filter/search state |
| Shared state | Provider/other state solution | Data needed across multiple screens |
A user might close a screen without selecting or returning anything. Therefore, returned data should often be treated as nullable.
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SelectionScreen(),
),
);
if (result != null) {
print('Selected: $result');
} else {
print('No selection made');
} When a State object awaits navigation and then uses its BuildContext or updates state, it is important to account for the possibility that the widget was removed while waiting.
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SelectionScreen(),
),
);
if (!mounted) return;
setState(() {
selectedValue = result;
}); Flutter's official returning-data recipe explicitly checks context.mounted after the asynchronous navigation operation before using the context. :contentReference[oaicite:6]{index=6}
Product List
|
| Product object
↓
Product Details
|
| true / updated product
↓
Product ListThis represents two-way navigation data flow:
Suppose we have:
Home
↓
Product Details
↓
CheckoutHome can pass the product:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailsScreen(
product: product,
),
),
);Product Details can pass the same product to Checkout:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CheckoutScreen(
product: product,
),
),
);Sometimes the destination needs multiple objects.
class CartScreen extends StatelessWidget {
final List products;
const CartScreen({
super.key,
required this.products,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Cart'),
),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(products[index].name),
subtitle: Text(
'₹${products[index].price}',
),
);
},
),
);
}
} Navigate:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen(
products: cartProducts,
),
),
);class UserFormData {
final String name;
final String email;
final String phone;
const UserFormData({
required this.name,
required this.email,
required this.phone,
});
}Collect the data:
final data = UserFormData(
name: nameController.text,
email: emailController.text,
phone: phoneController.text,
);Send it to the next screen:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ConfirmationScreen(
data: data,
),
),
);An edit screen can return updated information:
Navigator.pop(
context,
updatedUser,
);The previous screen receives it:
final updatedUser = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EditUserScreen(
user: user,
),
),
);
if (!mounted) return;
if (updatedUser != null) {
setState(() {
user = updatedUser;
});
} | Aspect | Constructor | Route Arguments |
|---|---|---|
| Type safety | Strong and explicit | Requires casting when using dynamic arguments |
| Readability | Very clear | Less direct |
| Direct navigation | Excellent | Useful but more indirect |
| Named routes | Not required | Commonly used |
| Large objects | Easy to model | Possible with arguments |
| Maintenance | Generally straightforward | Requires consistent argument handling |
Navigator.pop(context, result) when a screen needs to return a result.mounted after asynchronous navigation before calling setState() or using a context-dependent operation.class ProfileScreen extends StatelessWidget {
final User user;
const ProfileScreen({
super.key,
required this.user,
});
}Make sure the user object is provided when creating the screen.
final user =
ModalRoute.of(context)!.settings.arguments as User;If another type is passed as an argument, the cast can fail. Ensure that the sender and receiver agree on the expected type.
If the previous screen awaits a result:
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SelectionScreen(),
),
); The destination should return the expected value when appropriate:
Navigator.pop(context, 'Selected');A screen may be closed without returning a result, so handle null when appropriate.
After an asynchronous navigation operation, check mounted before updating a State object.
Consider a student list application.
class Student {
final int id;
final String name;
final String course;
const Student({
required this.id,
required this.name,
required this.course,
});
}Send the selected student:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StudentDetailsScreen(
student: student,
),
),
);Display the data:
class StudentDetailsScreen extends StatelessWidget {
final Student student;
const StudentDetailsScreen({
super.key,
required this.student,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(student.name),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('ID: ${student.id}'),
Text('Name: ${student.name}'),
Text('Course: ${student.course}'),
],
),
),
);
}
}A settings screen can return a selected theme mode.
Open Settings:
final selectedTheme = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const SettingsScreen(),
),
); Return the selection:
Navigator.pop(
context,
'dark',
);Handle it:
if (!mounted) return;
if (selectedTheme == 'dark') {
print('Dark theme selected');
}A country-selection screen can return a selected country.
final country = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const CountryScreen(),
),
); Country screen:
ListTile(
title: const Text('India'),
onTap: () {
Navigator.pop(context, 'India');
},
)┌──────────────────────┐
│ Screen A │
│ Product List │
└──────────┬───────────┘
│
│ Product object
↓
┌──────────────────────┐
│ Screen B │
│ Product Details │
└──────────┬───────────┘
│
│ Selected result
↓
┌──────────────────────┐
│ Screen A │
│ Updated UI │
└──────────────────────┘| Requirement | Approach |
|---|---|
| Simple direct screen navigation | Constructor parameters |
| Product list to product details | Pass model object through constructor |
| Existing named-route application | Named route arguments |
| Central route processing | onGenerateRoute |
| Return selected value | Navigator.pop(context, result) |
| Complex shared application state | State-management architecture |
| Deep-linkable product page | URL/path parameter |
| Complex routing/deep linking | Router-based solution such as go_router |
Data can be passed through constructor parameters, route arguments, RouteSettings, named-route arguments, or a suitable application-state architecture.
For direct navigation, passing data through the destination widget's constructor is a straightforward approach.
Use the arguments parameter of Navigator.pushNamed().
Use ModalRoute.of(context)!.settings.arguments or process the arguments in onGenerateRoute().
Use Navigator.pop(context, result).
It returns a Future that completes when the pushed route is popped, optionally containing the returned result.
The widget may have been removed while waiting for the navigation Future. Checking mounted prevents updating or using a context from a widget that is no longer active.
No. Depending on the application, passing an ID and loading the latest data can be more appropriate, especially when the destination needs fresh data or the route needs to be deep-linkable.
Yes. Dart objects can be passed through constructors and can also be passed through route arguments.
Create a Flutter application with the following screens:
Implement the following:
Product model.ListView.builder.Navigator.pop().null results and check mounted after asynchronous navigation.| Concept | Code | Purpose |
|---|---|---|
| Constructor data | Screen(data: value) | Directly pass data to a widget |
| Push screen | Navigator.push() | Open another screen |
| Route arguments | RouteSettings(arguments: value) | Attach data to a route |
| Named route arguments | arguments: value | Pass data with pushNamed() |
| Read arguments | ModalRoute.of(context) | Retrieve route data |
| Dynamic arguments | onGenerateRoute | Process arguments centrally |
| Return result | Navigator.pop(context, result) | Send data back |
| Receive result | await Navigator.push() | Wait for returned data |
| Check widget state | mounted | Ensure State is still active |
| URL parameter | /product/:id | Pass data through a route path |
RouteSettings can attach arguments to a route.arguments parameter.ModalRoute.of(context) can retrieve route arguments.onGenerateRoute can centralize route and argument handling.Navigator.pop(context, result) can return data to the previous screen.Navigator.push() returns a Future that can be awaited for a result.mounted after asynchronous navigation before updating widget state.go_router can be considered.To learn Flutter development, Dart programming, widgets, navigation, state management, APIs, Firebase integration, UI development, and practical Flutter projects, explore these resources:
